/*
 * tab组件
 * @Author: ljb
 * @Date: 2018-09-07 15:49:44
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-19 15:11:32
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-component-tab {
        display: flex;
		width: 1050px;
		height: 40px;
		margin: 14px auto 30px;
		align-items: center;
		box-sizing: border-box;
        .v-tab-item {
			position: relative;
			width: 348px;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			transition: all .3s 0s ease;
			color: #999;
			border-left: 1px solid #fff;
			border-right: 1px solid #fff;
			cursor: pointer;
			background-color: #F0F0F0;
			text-align: center;
			&.selected {
				background-color: #2D8CF0;
				color: #fff;
			}
			&:hover {
				background-color: rgba(45, 140, 240, .8);
				color: #fff;
			}
			&::after {
				content: '';
				position: absolute;
				top: -20px;
				bottom: -20px;
				left: -20px;
				right: -20px;
				background: #2d8cf0;
				background-repeat: no-repeat;
				background-position: 50%;
				opacity: 0;
				transition: all .3s;
				z-index: 10;
			}
			&:active::after {
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				opacity: .5;
				transition: 0s;
			}
		}
    }

</style>
<template>
	<div class="v-component-tab">
		<div
			v-for="tab in tabs"
			:key="tab.value"
			:class="[ current_tab === tab.value ? 'selected' : '' , 'v-tab-item']"
			@click="selectedTab(tab.value)">
			{{ tab.label }}
		</div>
	</div>
</template>

<script>
export default {
	name: 'VTab',
	model: {
		prop: 'current_tab',
		event: 'changeTab',
	},
	props: {
		current_tab: {
			type: String,
			default() {
				return 'all';
			},
		},
		tabs: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {

		};
	},
	methods: {
		/**
         * 选中tab
         * @param  {String} name {tab的name值}
         * @return {undefined}
         */
		selectedTab(name) {
			if (name === this.current_tab) return;
			this.$emit('changeTab', name);
		},
	},
};
</script>
